<template>
	<view class="ranking-container">
		<!-- 排行榜头部 -->
		<view class="ranking-header">
			<view class="header-bg">
				<text class="header-title">智力排行榜</text>
				<text class="header-subtitle">与全球用户一较高下</text>
			</view>
		</view>

		<!-- 排行榜类型切换 -->
		<view class="ranking-tabs">
			<view 
				class="tab-item" 
				:class="{active: currentTab === index}"
				v-for="(tab, index) in rankingTabs" 
				:key="index"
				@tap="switchTab(index)"
			>
				<text class="tab-text">{{ tab.name }}</text>
			</view>
		</view>

		<!-- 我的排名卡片 -->
		<view class="my-rank-card">
			<view class="rank-info">
				<view class="rank-number">
					<text class="rank-text">#{{ myRanking.rank }}</text>
				</view>
				<view class="user-info">
					<text class="username">{{ myRanking.username }}</text>
					<text class="score">{{ myRanking.score }}分</text>
				</view>
				<view class="rank-badge">
					<text class="badge-text">我的排名</text>
				</view>
			</view>
		</view>

		<!-- 排行榜列表 -->
		<view class="ranking-list">
			<view 
				class="ranking-item" 
				:class="{highlight: item.isMe}"
				v-for="(item, index) in currentRankingList" 
				:key="index"
			>
				<view class="rank-position">
					<view class="position-badge" :class="getRankClass(item.rank)">
						<text class="position-text">{{ item.rank }}</text>
					</view>
				</view>
				<view class="user-avatar">
					<image class="avatar-img" :src="item.avatar" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<text class="user-name">{{ item.username }}</text>
					<text class="user-level">{{ item.level }}</text>
				</view>
				<view class="score-info">
					<text class="score-value">{{ item.score }}</text>
					<text class="score-unit">分</text>
				</view>
				<view class="trend-indicator" v-if="item.trend">
					<text class="trend-text" :class="item.trend">{{ getTrendText(item.trend) }}</text>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text class="load-text" @tap="loadMore">加载更多</text>
		</view>

		<!-- 社交功能区域 -->
		<view class="social-section">
			<view class="social-tabs">
				<view 
					class="social-tab" 
					:class="{active: socialTab === 'friends'}"
					@tap="switchSocialTab('friends')"
				>
					<text class="social-tab-text">好友排行</text>
				</view>
				<view 
					class="social-tab" 
					:class="{active: socialTab === 'challenge'}"
					@tap="switchSocialTab('challenge')"
				>
					<text class="social-tab-text">挑战记录</text>
				</view>
			</view>

			<!-- 好友排行 -->
			<view class="friends-ranking" v-if="socialTab === 'friends'">
				<view class="friends-header">
					<text class="friends-title">好友排行榜</text>
					<view class="add-friend-btn" @tap="showAddFriend = true">
						<text class="add-friend-text">+ 添加好友</text>
					</view>
				</view>
				<view class="friends-list">
					<view 
						class="friend-item" 
						v-for="(friend, index) in friendsList" 
						:key="index"
					>
						<view class="friend-rank">{{ index + 1 }}</view>
						<image class="friend-avatar" :src="friend.avatar" mode="aspectFill"></image>
						<view class="friend-info">
							<text class="friend-name">{{ friend.name }}</text>
							<text class="friend-score">{{ friend.score }}分</text>
						</view>
						<view class="challenge-btn" @tap="challengeFriend(friend)">
							<text class="challenge-text">挑战</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 挑战记录 -->
			<view class="challenge-records" v-if="socialTab === 'challenge'">
				<view class="challenge-header">
					<text class="challenge-title">挑战记录</text>
				</view>
				<view class="challenge-list">
					<view 
						class="challenge-item" 
						v-for="(challenge, index) in challengeList" 
						:key="index"
					>
						<view class="challenge-info">
							<text class="challenge-opponent">VS {{ challenge.opponent }}</text>
							<text class="challenge-test">{{ challenge.testType }}</text>
							<text class="challenge-time">{{ challenge.time }}</text>
						</view>
						<view class="challenge-result" :class="challenge.result">
							<text class="result-text">{{ challenge.result === 'win' ? '胜利' : challenge.result === 'lose' ? '失败' : '平局' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加好友弹窗 -->
		<view class="add-friend-modal" v-if="showAddFriend" @tap="showAddFriend = false">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">添加好友</text>
					<view class="close-btn" @tap="showAddFriend = false">
						<text class="close-text">×</text>
					</view>
				</view>
				<view class="search-section">
					<input 
						class="search-input" 
						v-model="searchKeyword" 
						placeholder="输入用户名或ID搜索"
						@input="searchUsers"
					/>
					<view class="search-btn" @tap="searchUsers">
						<text class="search-text">搜索</text>
					</view>
				</view>
				<view class="search-results">
					<view 
						class="search-item" 
						v-for="(user, index) in searchResults" 
						:key="index"
					>
						<image class="search-avatar" :src="user.avatar" mode="aspectFill"></image>
						<view class="search-info">
							<text class="search-name">{{ user.name }}</text>
							<text class="search-level">{{ user.level }}</text>
						</view>
						<view class="add-btn" @tap="addFriend(user)">
							<text class="add-text">添加</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 挑战弹窗 -->
		<view class="challenge-modal" v-if="showChallenge" @tap="showChallenge = false">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">发起挑战</text>
					<view class="close-btn" @tap="showChallenge = false">
						<text class="close-text">×</text>
					</view>
				</view>
				<view class="challenge-content">
					<view class="opponent-info">
						<image class="opponent-avatar" :src="challengeTarget?.avatar" mode="aspectFill"></image>
						<text class="opponent-name">{{ challengeTarget?.name }}</text>
					</view>
					<view class="test-selection">
						<text class="selection-title">选择测试项目：</text>
						<view class="test-options">
							<view 
								class="test-option" 
								:class="{selected: selectedTest === test.type}"
								v-for="test in challengeTests" 
								:key="test.type"
								@tap="selectedTest = test.type"
							>
								<text class="test-name">{{ test.name }}</text>
							</view>
						</view>
					</view>
					<view class="challenge-actions">
						<view class="cancel-btn" @tap="showChallenge = false">
							<text class="cancel-text">取消</text>
						</view>
						<view class="confirm-btn" @tap="sendChallenge">
							<text class="confirm-text">发起挑战</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 当前选中的标签
const currentTab = ref(0)

// 排行榜类型
const rankingTabs = ref([
	{ name: '综合排行', type: 'overall' },
	{ name: '本周排行', type: 'weekly' },
	{ name: '反应速度', type: 'reaction' },
	{ name: '记忆力', type: 'memory' }
])

// 我的排名信息
const myRanking = ref({
	rank: 156,
	username: '智力挑战者',
	score: 1250
})

// 是否有更多数据
const hasMore = ref(true)

// 排行榜数据
const rankingData = ref({
	overall: [
		{
			rank: 1,
			username: '脑力王者',
			avatar: '/static/logo.png',
			level: 'IQ 145',
			score: 2850,
			trend: 'up',
			isMe: false
		},
		{
			rank: 2,
			username: '智慧女神',
			avatar: '/static/logo.png',
			level: 'IQ 142',
			score: 2720,
			trend: 'down',
			isMe: false
		},
		{
			rank: 3,
			username: '记忆大师',
			avatar: '/static/logo.png',
			level: 'IQ 138',
			score: 2650,
			trend: 'up',
			isMe: false
		},
		{
			rank: 4,
			username: '反应闪电',
			avatar: '/static/logo.png',
			level: 'IQ 135',
			score: 2580,
			trend: 'same',
			isMe: false
		},
		{
			rank: 5,
			username: '逻辑之神',
			avatar: '/static/logo.png',
			level: 'IQ 133',
			score: 2520,
			trend: 'up',
			isMe: false
		}
	],
	weekly: [
		{
			rank: 1,
			username: '本周之星',
			avatar: '/static/logo.png',
			level: 'IQ 140',
			score: 890,
			trend: 'up',
			isMe: false
		},
		{
			rank: 2,
			username: '进步神速',
			avatar: '/static/logo.png',
			level: 'IQ 128',
			score: 850,
			trend: 'up',
			isMe: false
		}
	],
	reaction: [
		{
			rank: 1,
			username: '闪电侠',
			avatar: '/static/logo.png',
			level: '180ms',
			score: 180,
			trend: 'up',
			isMe: false
		}
	],
	memory: [
		{
			rank: 1,
			username: '记忆超人',
			avatar: '/static/logo.png',
			level: '15位数字',
			score: 15,
			trend: 'up',
			isMe: false
		}
	]
})

// 当前排行榜列表
const currentRankingList = computed(() => {
	const tabType = rankingTabs.value[currentTab.value].type
	return rankingData.value[tabType] || []
})

// 社交功能相关
const socialTab = ref('friends')
const showAddFriend = ref(false)
const showChallenge = ref(false)
const searchKeyword = ref('')
const challengeTarget = ref(null)
const selectedTest = ref('')

// 好友列表
const friendsList = ref([
	{
		id: 1,
		name: '智慧小伙伴',
		avatar: '/static/logo.png',
		score: 1850,
		level: 'IQ 128'
	},
	{
		id: 2,
		name: '记忆达人',
		avatar: '/static/logo.png',
		score: 1720,
		level: 'IQ 125'
	},
	{
		id: 3,
		name: '反应高手',
		avatar: '/static/logo.png',
		score: 1650,
		level: 'IQ 122'
	}
])

// 挑战记录
const challengeList = ref([
	{
		id: 1,
		opponent: '智慧小伙伴',
		testType: '反应速度测试',
		result: 'win',
		time: '2小时前'
	},
	{
		id: 2,
		opponent: '记忆达人',
		testType: '数字记忆测试',
		result: 'lose',
		time: '1天前'
	},
	{
		id: 3,
		opponent: '反应高手',
		testType: '视觉记忆测试',
		result: 'draw',
		time: '3天前'
	}
])

// 搜索结果
const searchResults = ref([])

// 挑战测试类型
const challengeTests = ref([
	{ type: 'reaction', name: '反应速度测试' },
	{ type: 'memory', name: '数字记忆测试' },
	{ type: 'visual', name: '视觉记忆测试' },
	{ type: 'typing', name: '打字速度测试' },
	{ type: 'chimp', name: '黑猩猩测试' }
])

// 页面加载
onMounted(() => {
	loadRankingData()
})

// 切换标签
const switchTab = (index) => {
	currentTab.value = index
	loadRankingData()
}

// 获取排名样式类
const getRankClass = (rank) => {
	if (rank === 1) return 'gold'
	if (rank === 2) return 'silver'
	if (rank === 3) return 'bronze'
	return 'normal'
}

// 获取趋势文本
const getTrendText = (trend) => {
	switch (trend) {
		case 'up': return '↑'
		case 'down': return '↓'
		case 'same': return '—'
		default: return ''
	}
}

// 加载排行榜数据
const loadRankingData = () => {
	// 模拟加载数据
	console.log('加载排行榜数据:', rankingTabs.value[currentTab.value].type)
}

// 加载更多
const loadMore = () => {
	uni.showToast({
		title: '加载更多数据',
		icon: 'none'
	})
}

// 切换社交标签
const switchSocialTab = (tab) => {
	socialTab.value = tab
}

// 搜索用户
const searchUsers = () => {
	if (!searchKeyword.value.trim()) {
		searchResults.value = []
		return
	}
	
	// 模拟搜索结果
	searchResults.value = [
		{
			id: 101,
			name: '新朋友A',
			avatar: '/static/logo.png',
			level: 'IQ 120'
		},
		{
			id: 102,
			name: '新朋友B',
			avatar: '/static/logo.png',
			level: 'IQ 115'
		}
	]
}

// 添加好友
const addFriend = (user) => {
	// 检查是否已经是好友
	const isAlreadyFriend = friendsList.value.some(friend => friend.id === user.id)
	if (isAlreadyFriend) {
		uni.showToast({
			title: '已经是好友了',
			icon: 'none'
		})
		return
	}
	
	// 添加到好友列表
	friendsList.value.push({
		id: user.id,
		name: user.name,
		avatar: user.avatar,
		score: Math.floor(Math.random() * 2000) + 1000,
		level: user.level
	})
	
	uni.showToast({
		title: '添加好友成功',
		icon: 'success'
	})
	
	// 关闭弹窗
	showAddFriend.value = false
	searchKeyword.value = ''
	searchResults.value = []
}

// 挑战好友
const challengeFriend = (friend) => {
	challengeTarget.value = friend
	selectedTest.value = challengeTests.value[0].type
	showChallenge.value = true
}

// 发起挑战
const sendChallenge = () => {
	if (!selectedTest.value) {
		uni.showToast({
			title: '请选择测试项目',
			icon: 'none'
		})
		return
	}
	
	// 添加挑战记录
	const testName = challengeTests.value.find(test => test.type === selectedTest.value)?.name
	challengeList.value.unshift({
		id: Date.now(),
		opponent: challengeTarget.value.name,
		testType: testName,
		result: Math.random() > 0.5 ? 'win' : 'lose',
		time: '刚刚'
	})
	
	uni.showToast({
		title: '挑战已发送',
		icon: 'success'
	})
	
	// 关闭弹窗
	showChallenge.value = false
	challengeTarget.value = null
	selectedTest.value = ''
}
</script>

<style lang="scss" scoped>
.ranking-container {
	padding: 0;
	background: #f5f5f5;
	min-height: 100vh;
}

// 排行榜头部
.ranking-header {
	position: relative;
	height: 200rpx;
	margin-bottom: 20rpx;

	.header-bg {
		height: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;

		.header-title {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.header-subtitle {
			font-size: 26rpx;
			opacity: 0.8;
		}
	}
}

// 标签切换
.ranking-tabs {
	display: flex;
	background: white;
	margin: 0 20rpx 20rpx;
	border-radius: 15rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	overflow: hidden;

	.tab-item {
		flex: 1;
		padding: 25rpx 0;
		text-align: center;
		position: relative;
		transition: all 0.3s ease;

		&.active {
			background: $brand-primary;

			.tab-text {
				color: white;
				font-weight: bold;
			}
		}

		.tab-text {
			font-size: 28rpx;
			color: #666;
			transition: all 0.3s ease;
		}
	}
}

// 我的排名卡片
.my-rank-card {
	margin: 0 20rpx 20rpx;
	background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

	.rank-info {
		display: flex;
		align-items: center;
		color: white;

		.rank-number {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.rank-text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.user-info {
			flex: 1;

			.username {
				font-size: 32rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 8rpx;
			}

			.score {
				font-size: 26rpx;
				opacity: 0.9;
				display: block;
			}
		}

		.rank-badge {
			background: rgba(255, 255, 255, 0.2);
			border-radius: 20rpx;
			padding: 10rpx 20rpx;

			.badge-text {
				font-size: 24rpx;
			}
		}
	}
}

// 排行榜列表
.ranking-list {
	margin: 0 20rpx;

	.ranking-item {
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;

		&.highlight {
			background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
			border: 2rpx solid $brand-primary;
		}

		.rank-position {
			margin-right: 20rpx;

			.position-badge {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.gold {
					background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
				}

				&.silver {
					background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
				}

				&.bronze {
					background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
				}

				&.normal {
					background: #f0f0f0;
				}

				.position-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
				}
			}
		}

		.user-avatar {
			margin-right: 20rpx;

			.avatar-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 2rpx solid #f0f0f0;
			}
		}

		.user-details {
			flex: 1;

			.user-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}

			.user-level {
				font-size: 24rpx;
				color: #666;
				display: block;
			}
		}

		.score-info {
			text-align: right;
			margin-right: 15rpx;

			.score-value {
				font-size: 32rpx;
				font-weight: bold;
				color: $brand-primary;
				display: block;
			}

			.score-unit {
				font-size: 22rpx;
				color: #999;
				display: block;
			}
		}

		.trend-indicator {
			.trend-text {
				font-size: 28rpx;
				font-weight: bold;

				&.up {
					color: #52c41a;
				}

				&.down {
					color: #f5222d;
				}

				&.same {
					color: #999;
				}
			}
		}
	}
}

// 加载更多
.load-more {
	padding: 40rpx;
	text-align: center;

	.load-text {
		font-size: 28rpx;
		color: $brand-primary;
		padding: 20rpx 40rpx;
		border: 2rpx solid $brand-primary;
		border-radius: 30rpx;
		background: white;
	}
}

// 社交功能区域
.social-section {
	margin: 30rpx 20rpx;
	background: white;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	overflow: hidden;

	.social-tabs {
		display: flex;
		background: #f8f9fa;

		.social-tab {
			flex: 1;
			padding: 30rpx;
			text-align: center;
			transition: all 0.3s ease;
			cursor: pointer;

			&.active {
				background: white;
				color: $brand-primary;
				border-bottom: 3rpx solid $brand-primary;
			}

			.social-tab-text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	// 好友排行
	.friends-ranking {
		padding: 30rpx;

		.friends-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;

			.friends-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.add-friend-btn {
				background: linear-gradient(135deg, $brand-primary, #00D4FF);
				color: white;
				padding: 15rpx 25rpx;
				border-radius: 25rpx;
				font-size: 24rpx;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
				}
			}
		}

		.friends-list {
			.friend-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.friend-rank {
					width: 50rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background: #f8f9fa;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: bold;
					color: #666;
					margin-right: 20rpx;
				}

				.friend-avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 35rpx;
					margin-right: 20rpx;
				}

				.friend-info {
					flex: 1;

					.friend-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						display: block;
						margin-bottom: 5rpx;
					}

					.friend-score {
						font-size: 24rpx;
						color: $brand-primary;
						display: block;
					}
				}

				.challenge-btn {
					background: #28a745;
					color: white;
					padding: 12rpx 20rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.95);
					}
				}
			}
		}
	}

	// 挑战记录
	.challenge-records {
		padding: 30rpx;

		.challenge-header {
			margin-bottom: 25rpx;

			.challenge-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.challenge-list {
			.challenge-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.challenge-info {
					flex: 1;

					.challenge-opponent {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						display: block;
						margin-bottom: 5rpx;
					}

					.challenge-test {
						font-size: 24rpx;
						color: #666;
						display: block;
						margin-bottom: 5rpx;
					}

					.challenge-time {
						font-size: 22rpx;
						color: #999;
						display: block;
					}
				}

				.challenge-result {
					padding: 10rpx 20rpx;
					border-radius: 15rpx;
					font-size: 22rpx;
					font-weight: bold;

					&.win {
						background: #d4edda;
						color: #155724;
					}

					&.lose {
						background: #f8d7da;
						color: #721c24;
					}

					&.draw {
						background: #fff3cd;
						color: #856404;
					}
				}
			}
		}
	}
}

// 弹窗样式
.add-friend-modal,
.challenge-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;

	.modal-content {
		width: 80%;
		max-width: 600rpx;
		background: white;
		border-radius: 20rpx;
		overflow: hidden;
		max-height: 80%;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: #f8f9fa;
				display: flex;
				align-items: center;
				justify-content: center;

				.close-text {
					font-size: 36rpx;
					color: #666;
				}
			}
		}

		// 搜索区域
		.search-section {
			padding: 30rpx;
			display: flex;
			gap: 15rpx;

			.search-input {
				flex: 1;
				padding: 20rpx;
				border: 1rpx solid #e0e0e0;
				border-radius: 10rpx;
				font-size: 28rpx;
			}

			.search-btn {
				background: $brand-primary;
				color: white;
				padding: 20rpx 30rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}

		// 搜索结果
		.search-results {
			max-height: 400rpx;
			overflow-y: auto;
			padding: 0 30rpx 30rpx;

			.search-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.search-avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					margin-right: 20rpx;
				}

				.search-info {
					flex: 1;

					.search-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						display: block;
						margin-bottom: 5rpx;
					}

					.search-level {
						font-size: 24rpx;
						color: #666;
						display: block;
					}
				}

				.add-btn {
					background: #28a745;
					color: white;
					padding: 12rpx 20rpx;
					border-radius: 15rpx;
					font-size: 22rpx;
				}
			}
		}

		// 挑战内容
		.challenge-content {
			padding: 30rpx;

			.opponent-info {
				text-align: center;
				margin-bottom: 30rpx;

				.opponent-avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
					margin-bottom: 15rpx;
				}

				.opponent-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.test-selection {
				margin-bottom: 30rpx;

				.selection-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}

				.test-options {
					display: flex;
					flex-wrap: wrap;
					gap: 15rpx;

					.test-option {
						flex: 1;
						min-width: 200rpx;
						padding: 20rpx;
						border: 2rpx solid #e0e0e0;
						border-radius: 10rpx;
						text-align: center;
						transition: all 0.3s ease;

						&.selected {
							border-color: $brand-primary;
							background: rgba(0, 122, 255, 0.1);
							color: $brand-primary;
						}

						.test-name {
							font-size: 26rpx;
							font-weight: bold;
						}
					}
				}
			}

			.challenge-actions {
				display: flex;
				gap: 20rpx;

				.cancel-btn,
				.confirm-btn {
					flex: 1;
					padding: 25rpx;
					border-radius: 15rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.95);
					}
				}

				.cancel-btn {
					background: #f8f9fa;
					color: #666;
					border: 1rpx solid #e0e0e0;
				}

				.confirm-btn {
					background: linear-gradient(135deg, $brand-primary, #00D4FF);
					color: white;
				}
			}
		}
	}
}
</style>